<template>
  <div class="breadcrumb">
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item v-for="v in lists" :key="v.path">
        <router-link :to="v.path">{{ v.meta.title }}</router-link>
      </el-breadcrumb-item>
    </el-breadcrumb>
  </div>
</template>

<script>
export default {
  name: "breadcrumb",
  data() {
    return {
      lists: [],
    };
  },
  watch: {
    $route: {
      immediate: true,
      handler(to, from) {
        //  console.log(to.matched)
        this.getBreadcrumb(to.matched);
      },
    },
  },
  methods: {
    getBreadcrumb(matched) {
      if (matched.length && matched[1].name == "homepage") {
        matched = [
          { path: "/home/index", name: "homepage", meta: { title: "首页" } },
        ];
      }else if (matched.length && matched[1].name == "manageHomepage") {
        matched = [
          { path: "/manage/index", name: "manageHomepage", meta: { title: "首页" } },
        ];
      }
      this.lists = matched;
      // console.log(this.lists);
    },
  },
  mounted() {
    this.getBreadcrumb(this.$route.matched);
  },
};
</script>

<style></style>
